<template>
  <div class="dashboard-editor-container">
    <el-row v-if="showTitle">
      <screen-title></screen-title>
    </el-row>
    <el-row v-else style="width: 100%;height: 5%;">
      <svg-icon @click="toFullScreen" style="position: absolute;top:10px;right: 10px;fill: #fff;cursor: pointer;" icon-class="fullscreen"></svg-icon>
    </el-row>
    <el-row style="width: 100%;height: 90%;" type="flex" justify="space-around">
      <el-col :span="6" style="height: 100%;">
        <AlarmDept style="width: 100%;height: 25%;"></AlarmDept>
        <AlarmCount style="width: 100%;height: 25%;"></AlarmCount>
        <DeviceAlarmBar style="width: 100%;height: 40%;margin-bottom: 0;"></DeviceAlarmBar>
      </el-col>
      <el-col :span="11" style="height: 100%;position: relative;">
        <div
          style="position: absolute;width: 20%;height: 10%;background-color: rgb(63 62 62 / 40%);text-align: center;left: 2%;">
          <img src="../assets/images/left-bottom.png" alt=""
            style="transform: rotate(90deg) ;position: absolute;left: 5px;top: 5px;">
          <span style="display: block;color: #fff;font-size: 16px;margin-top: 10%;">工厂总数</span>
          <span style="color: #fff;display: block;font-size: 25px;">{{ deptTotal }}</span>
          <img src="../assets/images/left-bottom.png" alt=""
            style="transform: rotate(-90deg);position: absolute;right: 5px;bottom: 5px;">
        </div>
        <div
          style="position: absolute;width: 20%;height: 10%;background-color: rgb(63 62 62 / 40%);text-align: center;left: 2%;top: 12%;">
          <img src="../assets/images/left-bottom.png" alt=""
            style="transform: rotate(90deg) ;position: absolute;left: 5px;top: 5px;">
          <span style="display: block;color: #fff;font-size: 16px;margin-top: 12%;">设备总数</span>
          <span style="color: #fff;display: block;font-size: 25px;">{{ deviceTotal }}</span>
          <img src="../assets/images/left-bottom.png" alt=""
            style="transform: rotate(-90deg);position: absolute;right: 5px;bottom: 5px;">
        </div>
        <div style="width: 100%;height: 55%;" ref="chinaMap" id="chinaMap"></div>
        <AlarmInfo style="height: 40%;margin: 0 2%;"></AlarmInfo>
      </el-col>
      <el-col :span="6" style="height: 100%;">
        <DeptDeviceTop style="width: 100%;height: 25%;"></DeptDeviceTop>
        <DeviceRunningRate style="width: 100%;height: 25%;"></DeviceRunningRate>
        <VariableAlarmCount style="width: 100%;height: 40%;margin-bottom: 0;"></VariableAlarmCount>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
import AlarmDept from './dashboard/alarmDept.vue';
import AlarmCount from './dashboard/alarmCount.vue';
import DeviceAlarmBar from './dashboard/deviceAlarmBar.vue';
import AlarmInfo from './dashboard/alarmInfo.vue';
import DeptDeviceTop from './dashboard/deptDeviceTop.vue';
import DeviceRunningRate from './dashboard/deviceRunningRate.vue';
import VariableAlarmCount from './dashboard/variableAlarmCount.vue';
import { deviceTotal, deptTotal } from '../api/oil/statistic';
import ScreenTitle from './dashboard/screenTitle.vue';
export default {
  name: 'Index',
  components: { AlarmDept, AlarmCount, DeviceAlarmBar, AlarmInfo, DeptDeviceTop, DeviceRunningRate, VariableAlarmCount, ScreenTitle },
  data() {
    return {
      myChart: '',
      deviceTotal: 0,
      deptTotal: 0,
      showTitle: false,
    }
  },
  created() {
    deviceTotal().then(res => {
      this.deviceTotal = res.data.total;
    });
    deptTotal().then(res => {
      this.deptTotal = res.data.total;
    });
    console.log(this.$route.path);
    if (this.$route.path == '/adminScreen') {
      this.showTitle = true;
    }
  },
  mounted() {
    this.chinaEchart();
    // 窗口大小改变时，重新设置ECharts实例的大小
    window.addEventListener('resize', this.resize);
  },
  methods: {
    toFullScreen() {
      this.$router.push({ path: '/adminScreen' });
    },
    resize() {
      var chartDom = document.getElementById('chinaMap');
      // 获取容器的宽高
      var width = chartDom.offsetWidth;
      var height = chartDom.offsetHeight;
      if (this.myChart) {
        // 设置ECharts实例的大小
        this.myChart.resize({
          width: width,
          height: height
        });
      }

    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 方法
    chinaEchart() {
      //注册地图，这个特别重要
      echarts.registerMap('china', china)
      this.myChart = echarts.init(this.$refs.chinaMap);
      //echart 配制option  
      var options = {
        tooltip: {
          show: true,
          triggerOn: "mousemove",   //mousemove、click
          padding: [4, 8],
          borderWidth: 1,
          borderColor: '#409eff',
          backgroundColor: 'rgba(255,255,255,0.7)',
          textStyle: {
            color: '#000000',
            fontSize: 13
          },
          formatter: function (e) {
            return e.name;
          }
        },
        geo: [
          {
            map: 'china',
            aspectScale: 0.85,
            zoom: 1.2,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            show: true,
            roam: false,
            label: {
              show: false, // 各个省市县的名字
              color: '#fff',
            },
            itemStyle: {
              borderColor: '#c8feff',
              borderWidth: 0.5,
              shadowBlur: 3,
              shadowColor: '#66edff',
              areaColor: '#0862db',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                borderWidth: 1,
                areaColor: '#2da9ff',
              },
              label: {
                show: false,
                color: '#ffffff',
              }
            },
            select: {
              itemStyle: {
                shadowBlur: 10,
                borderWidth: 1,
                areaColor: '#2da9ff',
              },
              label: {
                color: '#ffffff',
              }
            }
          },
          // 重影
          {
            type: 'map',
            map: 'china',
            zlevel: -1,
            aspectScale: 0.85,
            zoom: 1.2,
            layoutCenter: ['50%', '51%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderType: 'solid',
              borderColor: 'rgba(58,149,253,0.8)',
              shadowColor: 'rgba(172, 122, 255,0.5)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)',
              borderCap: 'round'
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -2,
            aspectScale: 0.85,
            zoom: 1.2,
            layoutCenter: ['50%', '52%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.6)',
              shadowColor: 'rgba(65, 214, 255,0.6)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)',
              borderType: 'solid',
              borderCap: 'round'
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -3,
            aspectScale: 0.85,
            zoom: 1.2,
            layoutCenter: ['50%', '53%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.4)',
              shadowColor: 'rgba(29, 111, 165,1)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)',
              borderType: 'solid',
              borderCap: 'round'
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -4,
            aspectScale: 0.85,
            zoom: 1.2,
            layoutCenter: ['50%', '54%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 5,
              borderColor: 'rgba(5,9,57,0.8)',
              shadowColor: 'rgba(29, 111, 165,0.8)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)',
              borderType: 'solid',
              borderCap: 'round'
            },
          },
        ],
        series: [
          // 地图
          {
            type: "map",
            geoIndex: 0,
            data: []
          }
        ]
      }
      this.myChart.setOption(options);
      this.resize();
    }
  }
}
</script>

<style lang="scss">
.dashboard-editor-container {
  margin-top: -1px;
  padding: 0px;
  background-image: url("../assets/images/container-background.png");
  height: 100%;
  background-size: cover;
  position: relative;
}

.time {
  width: 100px;
  line-height: 18px;
  color: #BACBE9 !important;
  font-size: 14px !important;
  font-weight: 700;
  word-break: break-all;
  text-align: center;
}

.myChart {
  background: linear-gradient(135deg, rgb(0, 23, 59, 0.5), rgb(0, 13, 39, 0.5));
  position: relative;
  margin-bottom: 5%;
}
</style>
